<template>
  <div class="flex flex-wrap py-20 border-b-1 border-solid border-F5F5F5">
    <div class="relative h-100 w-100 rounded-10 bg-F6F7F8 overflow-hidden">
      <van-image
        :src="
          item.humanImageUrl ||
          `${IMG_CDN_39}/home/human_making_default_cover.jpg`
        "
        fit="contain"
        class="w-full h-full object-contain"
      />
      <div
        class="c-translucent-balck60 px-7 h-22 absolute bottom-6 right-6 rounded-10 text-11 text-white leading-22"
      >
        {{ HUMAN_TYPE_MAP[item.humanType] }}
      </div>
    </div>
    <div class="flex flex-col flex-1 ml-15">
      <div class="text-15 line-clamp-1">
        {{ item.humanAnchorName }}
      </div>
      <div class="mt-12 text-13 text-999999">
        创建时间：{{ item.createTime }}
      </div>
      <!-- 生成成功 -->
      <div
        v-if="item.humanTaskStatus === HUMAN_IMG_STATUS_ENUM.SUCCESS"
        class="flex items-end justify-between mt-auto"
      >
        <div
          class="px-6 h-22 leading-22 rounded-4 text-17B459 c-bg-17B459-10 text-13"
        >
          已生成
        </div>
        <div
          class="w-60 h-28 text-12 leading-28 c-linear-purple rounded-4 text-white text-center"
        >
          去创作
        </div>
      </div>
      <!-- 生成失败 -->
      <div
        v-if="item.humanTaskStatus === HUMAN_IMG_STATUS_ENUM.FAIL"
        class="flex items-end justify-between mt-auto"
      >
        <div
          class="px-6 h-22 leading-22 rounded-4 text-FF4A35 c-bg-FF4A35-10 text-13"
        >
          {{ item.checkStatus === -1 ? "用户驳回" : "生成失败" }}
        </div>
        <div
          v-if="
            item.humanType === HUMAN_TYPE_ENUM.NORMAL ||
            item.humanType === HUMAN_TYPE_ENUM.EXCLUSIVE
          "
          class="w-60 h-28 text-12 leading-28 c-linear-purple rounded-4 text-white text-center"
        >
          重新生成
        </div>
      </div>
      <!-- 生成中 -->
      <div
        v-if="item.humanTaskStatus === HUMAN_IMG_STATUS_ENUM.MAKING"
        class="flex items-end justify-between mt-auto"
      >
        <div
          v-if="
            item.humanType === HUMAN_TYPE_ENUM.PICTURE ||
            item.humanType === HUMAN_TYPE_ENUM.NO_TRAIN_VIDEO ||
            !item.humanTaskStageV2
          "
          class="px-6 h-22 leading-22 rounded-4 text-4D00FF bg-E2E0FF text-13"
        >
          生成中
        </div>
        <div
          v-if="
            item.humanTaskStageV2 === HUMAN_STAGE_STATUS_ENUM.SUBMIT ||
            item.humanTaskStageV2 === HUMAN_STAGE_STATUS_ENUM.AUDIT
          "
          class="px-6 h-22 leading-22 rounded-4 text-4D00FF bg-E2E0FF text-13"
        >
          人工审核中
        </div>
        <div
          v-if="
            item.humanTaskStageV2 === HUMAN_STAGE_STATUS_ENUM.PROCESS ||
            item.humanTaskStageV2 === HUMAN_STAGE_STATUS_ENUM.TRAIN
          "
          class="px-6 h-22 leading-22 rounded-4 text-4D00FF bg-E2E0FF text-13"
        >
          训练中
        </div>
        <div
          v-if="item.humanTaskStageV2 === HUMAN_STAGE_STATUS_ENUM.CONFIRM"
          class="px-6 h-22 leading-22 rounded-4 text-4D00FF bg-E2E0FF text-13"
        >
          待确认
        </div>
        <div
          v-if="item.humanTaskStageV2 === HUMAN_STAGE_STATUS_ENUM.CONFIRM"
          class="w-60 h-28 text-12 leading-28 c-linear-purple rounded-4 text-white text-center"
        >
          确认效果
        </div>
      </div>
      <!-- 另起一行展示失败信息 -->
      <div
        v-if="
          item.humanTaskStatus === HUMAN_IMG_STATUS_ENUM.FAIL &&
          item.humanTaskFailMessage
        "
        class="w-full mt-12 text-13"
      >
        <TextExpand
          :content="`${item.checkStatus === -1 ? '驳回' : '失败'}原因：${
            item.humanTaskFailMessage
          }`"
        />
      </div>
      <!-- 2D数字人生成中TIPS .. 仅2D数字人显示(通用口型一天, 专属口型两天) -->
      <div
        v-if="
          (item.humanType === HUMAN_TYPE_ENUM.NORMAL ||
            item.humanType === HUMAN_TYPE_ENUM.EXCLUSIVE) &&
          item.humanTaskStatus === HUMAN_IMG_STATUS_ENUM.MAKING &&
          item.humanTaskStageV2 !== HUMAN_STAGE_STATUS_ENUM.CONFIRM
        "
        class="flex items-center px-10 w-full h-30 mt-10 rounded-5 bg-F6F7F8"
      >
        <!-- 使用阿里云图标库图标（注意前缀） -->
        <svg-icon name="icon-tishi" :size="16" color="#333" />
        <div class="ml-7 text-12">
          为确保最佳效果，预计处理时长为{{
            item.humanType === HUMAN_TYPE_ENUM.EXCLUSIVE ? "两个工作日" : "一天"
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, PropType } from "vue";
import {
  HUMAN_IMG_STATUS_ENUM,
  HUMAN_STAGE_STATUS_ENUM,
  HUMAN_TYPE_ENUM
} from "@/enums";
import { HUMAN_TYPE_MAP, IMG_CDN_39 } from "@/constants";
import { MyHumanInfoData } from "@/api/MyHuman";

defineProps({
  item: {
    type: Object as PropType<MyHumanInfoData>,
    required: true
  }
});
</script>
